<template>
  <el-table
    v-if="height"
    ref="table"
    :key="key"
    v-loading="loading"
    class="base-table"
    border
    tooltip-effect="dark"
    :data="data"
    :height="height"
    @selection-change="handleSelectionChange">
    <el-table-column v-if="showSelection" align="center" type="selection" width="50" />
    <el-table-column v-if="showIndex" label="序号" align="center" type="index" width="50" />
    <template v-for="item in filterColumns">
      <el-table-column
        v-if="item.template"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :width="item.width || 'auto'"
        :min-width="item.minWidth || 'auto'"
        :class-name="item.class"
        align="center"
        show-overflow-tooltip>
        <template slot-scope="scope">
          <slot :name="item.prop" :row="scope.row" :$index="scope.$index" />
        </template>
      </el-table-column>
      <el-table-column
        v-else
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :formatter="item.formatter||null"
        :width="item.width || 'auto'"
        :min-width="item.minWidth || 'auto'"
        :class-name="item.class"
        align="center"
        show-overflow-tooltip />
    </template>
    <el-table-column
      v-if="showOperation"
      fixed="right"
      align="center"
      class-name="small-padding fixed-width"
      :width="operatonWidth">
      <template slot="header">
        操作
        <el-popover v-if="showFilterColumn" width="200px" popper-class="base-table-popover">
          <i slot="reference" class="choose-column" />
          <el-checkbox-group v-model="checkedColumns">
            <el-row v-for="item in columns" :key="item.prop" style="line-height:25px;">
              <el-checkbox :label="item.prop">{{ item.label }}</el-checkbox>
            </el-row>
          </el-checkbox-group>
        </el-popover>
      </template>
      <template slot-scope="scope">
        <slot name="operations-prefix" :row="scope.row" :$index="scope.$index" />
        <span v-for="(item, index) in defaultOperations" :key="index">
          <el-button
            v-if="item === 'view'"
            :key="index"
            v-permission-button="hasAuth ? publicConfig['ITPS-VIEW'] : true"
            class="el-icon-defined"
            size="mini"
            icon="el-icon-view"
            @click="$emit('view', scope.row)" />
          <el-button
            v-else-if="item === 'edit'"
            :key="index"
            v-permission-button="hasAuth ? publicConfig['ITPS-UPDATE'] : true"
            class="el-icon-defined"
            size="mini"
            icon="el-icon-edit"
            @click="$emit('updateForm', scope.row, scope.$index)" />
          <el-button
            v-else-if="item === 'delete'"
            :key="index"
            v-permission-button="hasAuth ? publicConfig['ITPS-DELETE'] : true"
            class="el-icon-defined"
            size="mini"
            icon="el-icon-delete"
            @click="$emit('deleteData', scope.row, scope.$index)" />
        </span>
        <slot name="operations" :row="scope.row" :$index="scope.$index" />
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  name: 'BaseTable',
  props: {
    height: {
      type: [Number, String],
      default: 0
    },
    loading: {
      type: Boolean,
      default: true
    },
    data: {
      type: Array,
      defualt() {
        return []
      }
    },
    columns: {
      type: Array,
      defualt() {
        return []
      }
    },
    showIndex: {
      type: Boolean,
      default: true
    },
    showSelection: {
      type: Boolean,
      default: false
    },
    showOperation: {
      type: Boolean,
      default: true
    },
    showFilterColumn: {
      type: Boolean,
      default: false
    },
    operatonWidth: {
      type: String,
      default: 'auto'
    },
    defaultOperations: {
      type: Array,
      default() {
        return ['view', 'edit', 'delete']
      }
    },
    // 是否需要根据权限展示操作
    hasAuth: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      checkedColumns: [],
      key: 1
    }
  },
  computed: {
    filterColumns() {
      return this.columns.filter(item => this.checkedColumns.includes(item.prop))
    }
  },
  watch: {
    columns: {
      handler(newVal) {
        this.checkedColumns = newVal.map(item => item.prop)
      },
      immediate: true
    }
  },
  methods: {
    handleSelectionChange(selection) {
      this.$emit('selection-change', selection)
    }
  }
}
</script>
<style lang="scss">
.base-table{
  width: 100%;
}
.base-table-popover{
  .el-checkbox-group{
    max-height: 210px;
    overflow-y: auto;
  }
  .base-table-popover-btn{
    margin-top: 5px;
    padding-top: 10px;
    border-top: 1px solid #ebebeb;
  }
}
</style>
